<template>
	<view class="mv-player-wrap">
		<video class="player" :src="mvPlayUrl" autoplay="true" page-gesture='true' :title="mvBaseInfo.name"></video>
		<div>
			{{mvBaseInfo.name}}
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mvPlayUrl:"",
				mvBaseInfo:{},
			}
		},
		methods: {
			async getMvBaseInfo(id) {
				const res = await this.rq.fetchGet(this.apiUrl.mvInfo,{mvid:id});
				this.mvBaseInfo = res[1].data.data
			},
			async getMvUrl(id) {
				const res = await this.rq.fetchGet(this.apiUrl.mvUrl,{id});
				this.mvPlayUrl = res[1].data.data.url
			}
		},
		created() {
			this.getMvBaseInfo(this.options.mvid);
			this.getMvUrl(this.options.mvid)
		}
	}
</script>

<style lang="scss">
.mv-player-wrap{
	.player{
		width: 100%;
		height: 40vh;
	}
}
</style>
